<template>
  <el-dialog title="选择地区" v-loading="dialogLoading" :close-on-click-modal="false" :visible.sync="visible" width="50%">
    <el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-cascader ref="refSubCat" :options="options" :props="props" collapse-tags v-model="selectList" @change="handleChange" style="width: 300px;">
          </el-cascader>
        </el-col>
        <el-col :span="12" v-if="pitchOnList !=''">
          <div>已选省、市</div>
          <div v-for="(item,index) in pitchOnList">{{item}}</div>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  treeDataTranslate
} from '@/utils'
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      visible: false,
      props: {
        multiple: true
      },
      options: [],
      pitchOnList: [], // 回显选中的name
      selectList: [], // 回显选中的code
      dataform: {
        id: '0',
        start_standards: null,
        start_freight: null,
        continued: null,
        continued_freight: null
        // area_rule: 选中的区域值
      }, // 提交数据
      dialogLoading: false,
      currId: '',
      areaRule: {}
    }
  },
  mounted () {
    this.getProvinces()
  },
  methods: {
    init (id, area_rule, default_rule, item) {
      this.visible = true
      this.pitchOnList = [] // 初始化先清空回显列表
      this.currId = id
      this.dataform = {
        start_standards: default_rule.start_standards,
        start_freight: default_rule.start_freight,
        continued: default_rule.continued,
        continued_freight: default_rule.continued_freight
      }
      if (item && item.id) {
        this.dataform.id = item.id
      }
      this.areaRule = area_rule || {}
      for (let key in area_rule) {
        if (area_rule[key].all) {
          this.pitchOnList.push(area_rule[key].name + '（全境）')
        } else {
          for (let keys in area_rule[key].list) {
            this.pitchOnList.push(area_rule[key].name + area_rule[key].list[keys].name)
          }
        }
      }
      if (this.options.length) {
        this.dealShow()
      }
    },

    // 处理回显
    dealShow () {
      this.dialogLoading = true
      this.selectList = []
      for (let key in this.areaRule) {
        for (let item of this.options) {
          if (key == item.value) {
            if (this.areaRule[key].all) {
              // 一级全选
              for (let obj of item.children) {
                let arr = []
                arr.push(item.value)
                arr.push(obj.value)
                this.selectList.push(arr)
              }
            } else {
              // 存在二级
              for (let keys in this.areaRule[key].list) {
                for (let obj of item.children) {
                  if (keys == obj.value) {
                    let arr = []
                    arr.push(key)
                    arr.push(obj.value)
                    this.selectList.push(arr)
                    break
                  }
                }
              }
            }
            break
          }
        }
      }
      this.dialogLoading = false
    },

    // 获取省市区
    getProvinces () {
      this.dialogLoading = true
      seviceApi.getCnareaTreelbs().then(res => {
        if (res && res.data.code == 200) {
          for (let i in res.data.tree.children) {
            for (let k in res.data.tree.children[i].children) {
              res.data.tree.children[i].children[k].children = null
            }
          }
          this.options = res.data.tree.children
          this.$forceUpdate()
          this.$nextTick(() => {
            if (Object.keys(this.areaRule).length) {
              this.dealShow()
            }
          })
        }
        this.dialogLoading = false
      })
    },
    // 选中的区域
    handleChange (value) {
      let allNode = this.$refs['refSubCat'].getCheckedNodes()
      this.dataform.area_rule = this.setAreaArray({}, allNode)
    },

    setAreaArray (area, v) {
      let code = ''
      let all = null
      let list = {}
      let label = ''
      v.forEach(res => {
        if (res.checked) {
          if (!res.parent) {
            // 一级被选中
            code = res.value
            all = true
            list = {}
            label = res.label
          } else {
            if (!res.parent.checked) {
              code = res.parent.value
              all = false
              label = res.parent.label
              list[res.value] = {
                all: true,
                name: res.label,
                list: {},
                code: res.value
              }
            } else {
              list: { }
            }
          }
          area[code] = {
            all: all,
            name: label,
            list: {},
            code: code
          }
          area[code].list = Object.assign(area[code].list, list)
        }
      })
      return area
    },

    // 提交
    dataFormSubmit () {
      if (!this.dataform.id) {
        seviceApi.addFreighttemplateRule(this.currId, this.dataform).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.$emit('result', res.data.data)
          }
        })
      } else {
        seviceApi.updateFreighttemplateRule(this.currId, this.dataform).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$emit('result', res.data.data)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.el-scrollbar__wrap {
  margin-right: 0px !important;
}
</style>
